<template>
  <!-- 此组件为头部广告，可自定义输入背景图，文字。这是第一版的，但暂时不用，先留着把 -->
  <!-- 此组件为头部广告，可自定义输入背景图，文字。这是第一版的，但暂时不用，先留着把 -->
  <!-- 此组件为头部广告，可自定义输入背景图，文字。这是第一版的，但暂时不用，先留着把 -->
  <div class="guanggao" :style="{backgroundImage:'url(' + conObj.url + ')'}">
    <section>
      <!-- 因为作为组件，数据传递来的，并无法提前限制其长度，从而不易实现左右预留空间动态控制，所以使用flex布局，做space-aroud -->
      <p v-html="conObj.text" />
      <button @click="pageGo">立即体验>></button>
      <i class="el-icon-close" @click="$emit('closeGg')" />
    </section>
  </div>
</template>

<script>
export default {
  props: ['conObj'],
  data() {
    return {

    }
  },
  methods: {
    pageGo() {
      console.log('gogo')
    }
  }
}
</script>

<style lang="scss" scoped>
.guanggao{
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  height: 51px;
  -background: url('../../../assets/img/advertisement/bg-gg.png') no-repeat scroll center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  //background-size: contain;
  section{
    width: 1200px;
    margin: 0 auto;
    height: 51px;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    >p{
      font-size: 27px;
      color: aqua;
      letter-spacing: 3px;
    }
    >button{
      width: 131px;
      height: 38px;
      line-height: 38px;
      background-color: rgb(243, 213, 136);
      color: #D6AC6E;
      text-align: center;
      cursor: pointer;
      border: none;
      border-radius: 5px;
    }
    >i{
      color: #D6AC6E;
      position: absolute;
      top: 10px;
      right: 31px;
      cursor: pointer;
    }
  }
}
</style>

